<template>
  <Card dis-hover :bordered="false">
    <Row :gutter="24">
      <Col
        :span="4"
        class="fenlei"
        style="padding-right: 15px; height: 750px; overflow-y: auto"
      >
        <div v-for="item in typeList" :key="item.value">
          <div v-if="item.is_age == 1">
            <h3>{{ item.label }}</h3>
            <Tag
              checkable
              :checked="false"
              color="primary"
              v-for="el in item.children"
              :key="el.value"
              @on-change="changeType(el.value, el.is_age)"
              >{{ el.label }}</Tag
            >
            <Divider />
          </div>

          <div v-else>
            <h3>{{ item.label }}</h3>
            <Tag
              checkable
              :checked="false"
              color="primary"
              v-for="el in item.children"
              :key="el.value"
              @on-change="changeType(el.value, el.is_age)"
              >{{ el.label }}</Tag
            >
          </div>
        </div>
      </Col>
      <Col :span="20">
        <Row>
          <Col :span="21">
            <Form inline :label-width="0">
              <FormItem>
                <RadioGroup
                  v-model="params.order_column"
                  type="button"
                  button-style="solid"
                  @on-change="searchData"
                >
                  <Radio label="created_at">最新上传</Radio>
                  <Radio label="download_total_num">最多下载</Radio>
                </RadioGroup>
              </FormItem>
              <FormItem>
                <Input
                  placeholder="请输入搜索关键词"
                  v-model="params.keyword"
                  @on-clear="searchData"
                  @on-enter="searchData"
                  clearable
                />
              </FormItem>
              <FormItem>
                <Select
                  placeholder="请选择项目"
                  v-model="params.project_ids"
                  :filterable="projectList.length >= 10"
                  multiple
                  @on-clear="searchData"
                  @on-change="searchData"
                  clearable
                >
                  <Option
                    v-for="item in projectList"
                    :value="item.value"
                    :key="item.value"
                    >{{ item.label }}</Option
                  >
                </Select>
              </FormItem>
              <FormItem>
                <Select
                  placeholder="标签筛选"
                  v-model="params.tag_ids"
                  multiple
                  :filterable="tagList.length >= 10"
                  clearable
                  @on-change="searchData"
                >
                  <Option
                    v-for="item in tagList"
                    :value="item.value"
                    :key="item.value"
                    >{{ item.label }}</Option
                  >
                </Select>
              </FormItem>
            </Form>
          </Col>
          <Col :span="3" class="ivu-text-right">
            <Button
              type="primary"
              v-hasC="{
                name: 'v1-buss-tool-create',
                flag: 'v1/buss/tool/create',
              }"
              @click="handleAdd"
              >上传素材</Button
            >
          </Col>
        </Row>
        <Row :gutter="24" style="max-height: 650px; overflow-y: auto">
          <Col :span="6" v-for="item in list" :key="item.id">
            <div class="ivu-mb-16">
              <div class="top" @click="showDetail(item.id)">
                <img
                  :src="item.thumb_url ? item.thumb_url : defaultImg"
                  @error="erroImg"
                  style="width: 100%; height: 100%; object-fit: cover"
                  alt=""
                />
                <p>
                  <span>
                    <Icon
                      type="ios-trash-outline"
                      :size="20"
                      @click.stop="haddleDel(item)"
                      v-hasC="{
                        name: 'v1-buss-tool-delete',
                        flag: 'v1/buss/tool/delete',
                      }"
                    />
                  </span>
                  <span>
                    <Icon type="ios-film" /> {{ item.download_video_num }}
                    <Icon type="ios-image" /> {{ item.download_image_num }}
                  </span>
                </p>
              </div>
              <div class="title">
                <span class="name" :title="item.name">{{ item.name }}</span>
                <span>下载：{{ item.download_total_num }}次</span>
              </div>
            </div>
          </Col>
          <Spin size="large" fix v-if="spinShow"></Spin>
        </Row>
        <Page
          class="ivu-mt-8"
          :total="total"
          :modelValue="params.page"
          :page-size="params.pageSize"
          :page-size-opts="pageOpts"
          show-total
          show-sizer
          @on-change="changePage"
          @on-page-size-change="changepageSize"
        />
      </Col>
    </Row>
    <detail ref="detail" @refresh="refresh" />
    <add ref="add" :edit="true" @refresh="refresh" />
  </Card>
</template>
<script>
import detail from "./detail.vue";
import add from "./add.vue";
import defaultImg from "@/assets/images/default.jpg";
import { categoryList, toolList, deleteTool } from "@api/toolnavigation.js";
export default {
  name: "toolnavigation",
  components: { detail, add },
  data() {
    return {
      defaultImg: defaultImg,
      spinShow: false,
      params: {
        created_stime: "",
        created_etime: "",
        order_column: "created_at",
        order_sort: "desc",
        keyword: "",
        status: "",
        project_ids: [],
        tag_ids: [],
        page: 1,
        pageSize: 8,
        actegory_ids: [],
        age_ids: [],
      },
      pageOpts: [8, 20, 30, 40],
      projectList: [],
      tagList: [],
      total: 0,
      list: [],
      typeList: [],
    };
  },
  mounted() {
    this.getCategoryList();
    this.getData();
  },
  methods: {
    refresh(status = false) {
      if (status) {
        this.page = 1;
        this.getData();
      } else {
        this.getData();
      }
    },
    getCategoryList() {
      categoryList().then((res) => {
        this.typeList = res;
      });
    },
    getData() {
      this.spinShow = true;
      toolList(this.params)
        .then((res) => {
          this.list = res.list;
          this.total = res.total;
          this.projectList = res.condition.project;
          this.tagList = res.condition.tag;
          this.spinShow = false;
        })
        .catch(() => {
          this.spinShow = false;
        });
    },
    searchData() {
      this.params.page = 1;
      this.getData();
    },
    //切换page
    changePage(index) {
      this.params.page = index;
      this.getData();
    },
    changepageSize(val) {
      this.params.pageSize = val;
      this.getData();
    },
    changeType(val, isAge) {
      if (isAge) {
        if (this.params.age_ids.includes(val)) {
          this.params.age_ids.splice(this.params.age_ids.indexOf(val), 1);
        } else {
          this.params.age_ids.push(val);
        }
      } else {
        if (this.params.actegory_ids.includes(val)) {
          this.params.actegory_ids.splice(
            this.params.actegory_ids.indexOf(val),
            1
          );
        } else {
          this.params.actegory_ids.push(val);
        }
      }
      this.searchData();
    },
    showDetail(id) {
      this.$refs.detail.init(id);
    },
    handleAdd() {
      this.$refs.add.init();
    },
    haddleDel(row) {
      this.$Modal.confirm({
        title: "删除提示",
        content: "是否确认删除此条记录，删除后不可恢复",
        onOk: () => {
          deleteTool({ id: row.id }).then((res) => {
            this.$Message.success("删除成功");
            this.getData();
          });
        },
      });
    },
    erroImg(e) {
      e.target.src = this.defaultImg;
    },
  },
};
</script>
<style scoped>
.top {
  position: relative;
  width: 100%;
  height: 278px;
  background: #ddd;
  overflow: hidden;
  cursor: pointer;
}
.top img {
  -webkit-transition: -webkit-transform 500ms ease-in-out;
  -moz-transition: -moz-transform 500ms ease-in-out;
  -o-transition: -o-transform 500ms ease-in-out;
  transition: transform 500ms ease-in-out;
}
.top img:hover {
  transform: scale(1.05);
}
.top p {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 30px;
  background: rgba(7, 17, 27, 0.7);
  text-align: right;
  line-height: 30px;
  color: #fff;
  padding: 0 10px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
}
.title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  line-height: 30px;
}
.title .name {
  width: 60%;
  overflow: hidden;
  white-space: normal;
  text-overflow: ellipsis;
  word-break: keep-all;
  text-wrap: nowrap;
}
h3 {
  margin: 10px 0;
}
</style>
